<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <div>
      <h1>箭头函数</h1>
      <p>箭头函数不会改变this指向</p>
    </div>
    <script>
      //普通函数
      function inc(number) {
        return number + 1;
      }
      //箭头函数,单个参数,和返回值
      const inc1 = (n) => n + 1;

      console.log(inc(2)); //3
      console.log(inc1(2)); //3

      //多个参数，多条语句

      const inc2 = (n1, n2, n3) => {
        //有括号的需要加return
        return n1 + n2 + n3;
      };

      console.log(inc2(10, 20, 30)); //60

      //箭头函数不会改变this的指向
      const person = {
        name: "tom",
        //this指向调用者
        sayHi: function () {
          console.log(this.name); //tom
        },
        //箭头函数外部的this是什么内部就是什么
        sayHe: () => {
          console.log(this.name); //undefined
        },
        sayhh: function () {
          //因为setTimeout是全局的
          setTimeout(function () {
            console.log(this.name); //undefined
          }, 1000);
        },
        sayHH: function () {
          //this指向是当前作用域
          setTimeout(() => {
            console.log(this.name); //tom
          }, 1000);
        },
      };

      person.sayHi();
      person.sayHe();
      person.sayhh();
      person.sayHH();
    </script>
  </body>
</html>
